﻿@model Trul.Application.UI.Core.Models.HomeViewModel
@using Trul.WebUI.Helper
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.Partial("_TopMenu", "Home")
<span data-bind="visible:IsNameNull">
    <h3>@this.GetLocalResource("Hi"), <span data-bind="text: HomeModel.FirstName"></span></h3>
</span>
<div class="alert alert-info">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <h4>@this.GetLocalResource("Title")</h4>
    @this.GetLocalResource("SubTitle")
</div>
<div class="form-horizontal">
    <div class="control-group">
        @Html.LabelFor(m => m.FirstName, new { @class = "control-label" })
        <div class="controls">
            @Html.TextBoxFor(m => m.FirstName, new { data_bind = "value: HomeModel.FirstName" })
        </div>
    </div>
    <div class="control-group">
        @Html.LabelFor(m => m.LastName, new { @class = "control-label" })
        <div id="inputLastName" class="controls">
            @Html.TextBoxFor(m => m.LastName, new { data_bind = "value: HomeModel.LastName" })
        </div>
    </div>
    <div class="control-group">
        @Html.LabelFor(m => m.Countries, new { @class = "control-label" })
        <div id="ddlMenu" class="controls">
            @Html.DropDownListFor(m => m.Countries, new List<SelectListItem>(), new { data_bind = "options: HomeModel.Countries, value: HomeModel.SelectedCountry, optionsValue : 'ID', optionsText: 'Name'" })
        </div>
    </div>
</div>
<div class="form-actions">
    <input type="button" data-bind="click: save" class="btn btn-large btn-primary" value="@this.GetLocalResource("Save")" />
</div>

@Html.Partial("_Modal")

<script type="text/javascript">

    var data = @Html.Raw(Model.ToJS());
    
    var ViewModel = function()
    {
        this.HomeModel = ko.mapping.fromJS(data);
        this.save = function(){
            $("#partialModalBody").text(ko.mapping.toJSON(this.HomeModel));
            $('#partialModal').modal('toggle');
        };
        this.IsNameNull = ko.computed(function(){
            return this.HomeModel.FirstName().length > 0;
        }, this);
    }

    ko.applyBindings(new ViewModel());
</script>
